<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
<h3>API</h3>
<fieldset>
    <legend>应用参数</legend>
    <table>
        <tr>
            <td>clientId: <input id="clientIdSpan" type="text" value="zehtufcp4v3zs8nzs2ldp7hkd22y00t9"></td>
            <td>clientSecret: <input id="clientSecretSpan" type="text" value="8dnf2r7diltoj1nx98iix0ydbayldq3c1wg00006">
            </td>
            <td>redirectUri: <input id="redirectUriSpan" type="text" value="http://sso.jap.com:8443/oauth2/login/jai">
            </td>
            <td>scopes: <input id="scopesSpan" type="text" value="read write openid profile email phone address"></td>
            <td>grantTypes: <input id="grantTypesSpan" type="text" value="authorization_code"></td>
            <td>responseTypes: <input id="responseTypesSpan" type="text" value="code"></td>
        </tr>
    </table>
</fieldset>
<fieldset id="callbackParam" disabled>
    <legend>回调参数</legend>
    <table>
        <tr>
            <td>code: <input id="codeSpan" type="text"></td>
            <td>state: <input id="stateSpan" type="text"></td>
            <td>accessToken: <input id="accessTokenSpan" type="text"></td>
            <td>expiresIn: <input id="expiresInSpan" type="text"></td>
            <td>tokenType: <input id="tokenTypeSpan" type="text"></td>
            <td>scope: <input id="scopeSpan" type="text"></td>
            <td>idToken: <input id="idTokenSpan" type="text"></td>
        </tr>
    </table>
</fieldset>
<fieldset>
    <legend>授权码模式测试</legend>
    <ur>
        <li>
            <input type="button" id="envTest_btn" value="获取code">
        </li>
        <br>
        <li>
            <input type="button" id="token_btn" value="获取token">
        </li>
        <br>
        <li>
            access_token=
            <input type="text" id="access_token">
            <input type="button" id="userinfo_btn" value="获取user信息">
        </li>
        <br>
        <li>
            <input type="button" id="logoutToken_btn" value="退出登录">
        </li>

    </ur>
</fieldset>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script>
    var baseUrl = "http://localhost:8081";
    var clientId = $("#clientIdSpan").val()
    var clientSecret = $("#clientSecretSpan").val()
    var redirectUri = $("#redirectUriSpan").val()
    var scopes = $("#scopesSpan").val()
    var grantTypes = $("#grantTypesSpan").val()
    var responseTypes = $("#responseTypesSpan").val()
    var accessToken = $("#access_token").val()

    function getQueryParams(paramName) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var param = vars[i].split("=");
            if (param[0] === paramName) {
                return param[1];
            }
        }
        return null;
    }

    String.prototype.format = function (args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    if (args[key] != undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            } else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] != undefined) {
                        var reg = new RegExp("({)" + i + "(})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
        }
        return result;
    }

    $(function () {
        var code = getQueryParams("code");
        var callbackState = getQueryParams("state");
        $("#codeSpan").val(code);
        $("#stateSpan").val(callbackState);
        $("#accessTokenSpan").val(getQueryParams("access_token"));
        $("#expiresInSpan").val(getQueryParams("expires_in"));
        $("#tokenTypeSpan").val(getQueryParams("token_type"));
        $("#scopeSpan").val(getQueryParams("scope"));
        $("#idTokenSpan").val(getQueryParams("id_token"));
    })

    /**
     * 环境测试
     */
    $("#envTest_btn").click(function () {
        // var clientId = $("#clientIdSpan").val()
        // var clientSecret = $("#clientSecretSpan").val()
        // var redirectUri = $("#redirectUriSpan").val()
        // var scopes = $("#scopesSpan").val()
        // var grantTypes = $("#grantTypesSpan").val()
        // var responseTypes = $("#responseTypesSpan").val()
        // var accessToken = $("#access_token").val()

        var url = "{0}/oauth/authorize?client_id={1}&response_type={2}&redirect_uri={3}&scope={4}&state=12345".format(baseUrl, clientId, responseTypes, redirectUri, scopes)
        window.open(url)
    })

    $("#token_btn").click(function () {
        var code = getQueryParams("code");
        var url = "{0}/oauth/token?client_id={1}&client_secret={2}&redirect_uri={3}&code={4}&grant_type={5}".format(baseUrl, clientId, clientSecret, redirectUri, code, grantTypes)
        window.open(url)
    })

    $("#userinfo_btn").click(function () {
        var url = "{0}/oauth/userinfo?access_token={1}".format(baseUrl, accessToken)
        window.open(url)
    })

    /**
     * 退出登录
     */
    $("#logoutToken_btn").click(function () {
        var access_token = $("#access_token").val()
        window.open(baseUrl + "/oauth/logout?access_token=" + access_token)
    })
</script>
</html>